<!-- 楼栋管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-button type="success" @click="add">
        <el-icon class="icon">
          <Plus />
        </el-icon>
        新增楼层
      </el-button>

      <el-tree
        style="max-width: 600px; margin-top: 20px"
        :props="{ label: 'name' }"
        :data="list"
        show-checkbox
        node-key="id"
        :default-expand-all="false"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ data.name }}</span>
            <span>
              <el-button type="success" class="btn" @click="addSon(0, data)">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-button>
              <el-button type="primary" :icon="Edit" circle @click="addSon(data.id, data)" />
              <el-button type="danger" :icon="Delete" circle @click="del(data.id)" />
            </span>
          </span>
        </template>
      </el-tree>

      <!-- 添加 -->
      <buildingAdd v-if="dialogVisible" :listParams="listParams" @close="handelClose" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit } from "@element-plus/icons-vue";
import { buildingList, buildingDel } from "@/api/config/building/building";
import { buildingListData, addParams } from "@/api/config/building/type";
import buildingAdd from "@/components/config/buildingAdd.vue";
import { buildTree } from "@/utils/treeUtil";
// 是否显示弹框
const dialogVisible = ref(false);

const listParams = reactive<addParams>({
  id: 0,
  name: "",
  pid: 0,
});

const list = ref<buildingListData[]>([]);
const getList = async () => {
  let res = await buildingList();
  // console.log(res);
  list.value = buildTree(res.list);
};

// 添加
const add = () => {
  dialogVisible.value = true;
};

// 添加子节点
const addSon = (id: number, data: any) => {
  listParams.id = id;
  if (listParams.id === 0) {
    listParams.pid = data.id;
    listParams.name = "";
  } else {
    listParams.pid = data.pid;
    listParams.name = data.name;
  }
  dialogVisible.value = true;
};

// 删除
const del = async (id: number) => {
  ElMessageBox.confirm("确认删除该条数据吗?", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await buildingDel(id);
      // console.log('删除', res);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};

// 关闭弹框
const handelClose = () => {
  dialogVisible.value = false;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="less">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

/deep/.el-tree-node__content {
  margin: 8px !important;
}

.btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.icon {
  margin-right: 5px;
  font-size: 12px;
}
</style>
